import React, {Component} from 'react';
import './Rank.css';
import OfficialList from "../../components/Rank/OfficialList/OfficialList";
import GlobalList from "../../components/Rank/GlobalList/GlobalList";

class Rank extends Component {

	constructor(props) {
		super(props);

		this.state = {
			officialList: [], // 官方榜
			globalList: [], // 全球榜
		}
	}

	componentDidMount() {
		this.initialize.call(this);
	}

	// 初始化
	initialize() {
		this.$axios({
			url: '/toplist/detail'
		}).then(res => {
			console.log(res);
			if (res.code === 200) {
				let list = res.list;
				let officialList = list.splice(0, 4);
				let globalList = list;
				this.setState(state => {
					return {
						officialList,
						globalList
					}
				})
			}
		})
	}

	render() {
		return (
			<div className='rank'>
				<h1 className="title">官方榜</h1>
				<OfficialList history={this.props.history} officialList={this.state.officialList}/>
				<h1 className="title">全球榜</h1>
				<GlobalList history={this.props.history} globalList={this.state.globalList}/>
			</div>
		);
	}
}

export default Rank;